<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平行板电容器交互动画</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8">
        <h1 class="text-3xl font-bold text-center mb-8 text-blue-800">
            <i class="fas fa-bolt mr-2"></i>平行板电容器交互动画
        </h1>
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 参数调节区 -->
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">
                    <i class="fas fa-sliders-h mr-2"></i>参数调节
                </h2>
                
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            极板带电量 Q (μC)
                        </label>
                        <input type="range" id="chargeSlider" min="1" max="100" value="50" 
                               class="w-full h-2 bg-blue-200 rounded-lg appearance-none cursor-pointer">
                        <div class="flex justify-between text-xs text-gray-500 mt-1">
                            <span>1</span>
                            <span id="chargeValue">50</span>
                            <span>100</span>
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            极板面积 A (cm²)
                        </label>
                        <input type="range" id="areaSlider" min="10" max="200" value="100" 
                               class="w-full h-2 bg-green-200 rounded-lg appearance-none cursor-pointer">
                        <div class="flex justify-between text-xs text-gray-500 mt-1">
                            <span>10</span>
                            <span id="areaValue">100</span>
                            <span>200</span>
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            极板间距 d (mm)
                        </label>
                        <input type="range" id="distanceSlider" min="1" max="20" value="5" 
                               class="w-full h-2 bg-yellow-200 rounded-lg appearance-none cursor-pointer">
                        <div class="flex justify-between text-xs text-gray-500 mt-1">
                            <span>1</span>
                            <span id="distanceValue">5</span>
                            <span>20</span>
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            介电常数 εᵣ
                        </label>
                        <input type="range" id="dielectricSlider" min="1" max="10" value="1" step="0.1"
                               class="w-full h-2 bg-purple-200 rounded-lg appearance-none cursor-pointer">
                        <div class="flex justify-between text-xs text-gray-500 mt-1">
                            <span>1</span>
                            <span id="dielectricValue">1.0</span>
                            <span>10</span>
                        </div>
                    </div>
                </div>
                
                <div class="mt-6 p-4 bg-blue-50 rounded-lg">
                    <h3 class="font-semibold text-blue-800 mb-2">物理常数</h3>
                    <p class="text-sm text-blue-700">
                        ε₀ = 8.85×10⁻¹² F/m<br>
                        真空介电常数
                    </p>
                </div>
            </div>
            
            <!-- 动画展示区 -->
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">
                    <i class="fas fa-play-circle mr-2"></i>动画展示
                </h2>
                <div class="relative">
                    <canvas id="capacitorCanvas" width="400" height="300" 
                            class="border border-gray-300 rounded-lg w-full"></canvas>
                    <div class="absolute top-2 right-2 bg-white bg-opacity-80 px-2 py-1 rounded text-xs">
                        <i class="fas fa-info-circle mr-1"></i>电场线可视化
                    </div>
                </div>
                
                <div class="mt-4 flex justify-center space-x-4">
                    <button id="playBtn" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
                        <i class="fas fa-play mr-1"></i>播放动画
                    </button>
                    <button id="pauseBtn" class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600">
                        <i class="fas fa-pause mr-1"></i>暂停
                    </button>
                    <button id="resetBtn" class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600">
                        <i class="fas fa-redo mr-1"></i>重置
                    </button>
                </div>
            </div>
            
            <!-- 物理量与原理说明区 -->
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">
                    <i class="fas fa-calculator mr-2"></i>物理量计算
                </h2>
                
                <div class="space-y-4">
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <h3 class="font-semibold text-gray-700 mb-2">计算结果</h3>
                        <div class="space-y-2 text-sm">
                            <div class="flex justify-between">
                                <span>电容 C:</span>
                                <span id="capacitance" class="font-mono">-</span>
                            </div>
                            <div class="flex justify-between">
                                <span>电场强度 E:</span>
                                <span id="electricField" class="font-mono">-</span>
                            </div>
                            <div class="flex justify-between">
                                <span>电势差 V:</span>
                                <span id="voltage" class="font-mono">-</span>
                            </div>
                            <div class="flex justify-between">
                                <span>储能 U:</span>
                                <span id="energy" class="font-mono">-</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-blue-50 p-4 rounded-lg">
                        <h3 class="font-semibold text-blue-800 mb-2">物理原理</h3>
                        <div class="text-sm text-blue-700 space-y-2">
                            <p><strong>电容公式:</strong> C = ε₀εᵣA/d</p>
                            <p><strong>电场强度:</strong> E = σ/ε = Q/(ε₀εᵣA)</p>
                            <p><strong>电势差:</strong> V = Ed = Q/C</p>
                            <p><strong>储能:</strong> U = ½CV² = Q²/(2C)</p>
                        </div>
                    </div>
                    
                    <div class="bg-green-50 p-4 rounded-lg">
                        <h3 class="font-semibold text-green-800 mb-2">关键概念</h3>
                        <div class="text-sm text-green-700 space-y-1">
                            <p>• <strong>电场线密度</strong> ∝ 电场强度</p>
                            <p>• <strong>电荷分布</strong> 均匀分布在极板表面</p>
                            <p>• <strong>介电质</strong> 增强电容，降低电场</p>
                            <p>• <strong>边缘效应</strong> 电场线在边缘处弯曲</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>